<template>
	<view class="my-content">
		<u-form :model="searchForm" ref="uForm" label-position="top">
			<u-form-item :label="$t('模板名称')" class="bgWhite padding">
				<u-input v-model="searchForm.name" :placeholder="$t('请输入模板名称')" />
			</u-form-item>
			<u-form-item :label="$t('邮件主题')" class="bgWhite padding">
				<u-input v-model="searchForm.title" :placeholder="$t('点击添加邮件主题')" disabled @click="showPicker = true"
					:custom-style="myStyle" />
			</u-form-item>
			<view style="height:10rpx"></view>
			<u-form-item class="bgWhite padding">
				<u-input type="textarea" v-model="searchForm.content" :height="300" :placeholder="$t('点击输入邮件内容')"/>
			</u-form-item>
			<u-form-item :label="$t('上传文件')" class="bgWhite padding">
				<u-input :placeholder="$t('请选择')" v-if="!searchForm.file" v-model="searchForm.file" disabled
					@click="chooseFiles" :custom-style="myStyle" />
				<view v-else @click="chooseFiles">{{searchForm.file.name}}</view>
			</u-form-item>
		</u-form>
		<view class="footer">
			<u-button type="primary" :custom-style="customStyle" hover-class="none" @click="saveTemplate">
				{{$t("保存模板")}}
			</u-button>
		</view>
		<u-picker mode="selector" :title="$t('邮件主题')" v-model="showPicker" :range="selectorObj" range-key="name"
			@confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myStyle: {
					textAlign: 'left',
					pointerEvents: "none"
				},
				customStyle: {
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '15rpx',
					'width': '480rpx',
				},
				searchForm: {
					name: "",
					title: "",
					content: "",
					file: '',
					fileUrl: ''
				},
				showPicker: false,
				selectorObj: [],
				limitType: ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'],
			};
		},
		methods: {
			//保存
			saveTemplate(){
				console.log(this.searchForm);
			},
			//选择主题确定
			pickerConfirm(e) {
				console.log(e[0]);
			},
			chooseFiles() {
				const that = this
				// #ifdef MP-WEIXIN
				uni.chooseMessageFile({
					count: 6,
					type: 'file',
					extension: that.limitType,
					success: function(res) {
						console.log('chooseMessageFile', res)
						const tempFilePaths = res.tempFiles
						const tempFiles = res.tempFiles
						for (let i = 0; i < tempFilePaths.length; i++) {
							that.uploadFile(tempFilePaths[i].path, tempFiles[i])
						}
					}
				});
				// #endif
				// #ifdef H5
				uni.chooseFile({
					count: 6,
					extension: that.limitType,
					success: function(res) {
						const tempFilePaths = res.tempFilePaths
						const tempFiles = res.tempFiles
						for (let i = 0; i < tempFilePaths.length; i++) {
							that.uploadFile(tempFilePaths[i], tempFiles[i])
						}
					}
				});
				// #endif
				// #ifdef APP-PLUS
				console.log('APP')
				const lemonjkFileSelect = uni.requireNativePlugin('lemonjk-FileSelect');
				//提示：
				//1.不要忘了在 "manifest.json -> APP原生插件配置" 内添加本插件，否则云打包（离线打包）不会生效 showNativePicker
				lemonjkFileSelect.showPicker({
					//各属性配置见下方【showPicker可配置参数说明】
					pathScope: "/Download",
					mimeType: "*/*",
					utisType: "public.data",
					multi: 'yes',
					// securityPackageName: "com.android.egg",
					// securityScope: 'data'
				}, result => {
					// 返回值说明见下方【showPicker返回值说明】
					console.log('result', result)
					// （仅安卓）当错误码为1001，即未授权文件读取权限,可以提示用户未打开读取文件权限，并跳转设置页
					if (result.code == 1001) {
						uni.showModal({
							title: that.$t("需要文件访问权限"),
							content: that.$t("您还未授权本应用读取文件。为保证您可以正常上传文件，请在权限设置页面打开文件访问权限"),
							confirmText: that.$t("去授权"),
							cancelText: that.$t("算了"),
							success(e) {
								if (e.confirm) {
									// 跳转到应用设置页
									lemonjkFileSelect.gotoSetting();
								}
							}
						})
					}
					const tempFilePaths = result.files
					for (let i = 0; i < tempFilePaths.length; i++) {
						uni.showLoading({
							title: that.$t('上传中')
						})
						// 20秒没传完，关闭提示
						setTimeout(() => {
							uni.hideLoading()
						}, 20000)
						that.uploadFile(tempFilePaths[i].filePath, tempFilePaths[i])
					}
				})
				// #endif
			},
			uploadFile(file, showFile) {
				const that = this
				if (showFile.size) {
					if (showFile.size > 52428800) {
						that.$u.toast(that.$t('上传文件过大'))
						return false
					}
				}
				if (showFile.fileSize) {
					if (showFile.fileSize > 52428800) {
						that.$u.toast(that.$t('上传文件过大'))
						return false
					}
				}
				this.$set(this.searchForm, 'file', showFile)
				uni.uploadFile({
					url: that.action,
					filePath: file,
					name: 'file',
					success: (uploadFileRes) => {
						console.log('uploadFileRes', uploadFileRes)
						uni.hideLoading()
						const resData = JSON.parse(uploadFileRes.data)
						if (resData.code === 1) {
							let resUrl = {
								url: resData.data.url
							}
							this.$set(this.searchForm, 'fileUrl', resUrl)
						} else {
							that.$u.toast(resData.msg)
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.my-content {
		background-color: #f6f6f6;
		height: auto;
		min-height: 100%;
		padding: 20rpx 0;
		padding-bottom: 110rpx;

		.footer {
			position: fixed;
			left: 0;
			bottom: 20rpx;
			width: 100%;
			text-align: center;
		}

		.bgWhite {
			background: #fff;
		}

		.padding {
			padding: 10rpx 30rpx;
		}
	}
</style>